<template>
  <section class="recommend section clearfix">
    <div class="col-sm-5 col-sm-offset-1">
      <div class="logo">
        <img v-lazy="storeLogoUrl || store.storeLogoUrl">
        <div class="edit-logo">
          <form id="updateStoreLogo" :action="url" method="POST" enctype="multipart/form-data">
            <i class="ico-edit"></i>编辑店铺LOGO
            <input type="file" name="storeLogo" @change="updateStoreLogo($event)" accept="image/*">
            <input type="hidden" name="accessToken" :value="$store.getters.token">
          </form>
        </div>
      </div>
      <div class="company">
        <h3>{{store.storeName}}</h3>
        <p><i class="ico-part"></i>角色：{{roleString}}</p>
      </div>
    </div>
    <div class="col-sm-4 col-sm-offset-1 score">
      <h3><i class="ico-shop"></i>店铺动态评分</h3>
      <p>商品评价：<strong v-if="store.storePoint">{{store.storePoint.storeEvaluate || 0}}分</strong></p>
      <p>物流服务：<strong v-if="store.storePoint">{{store.storePoint.shipEvaluate || 0}}分</strong></p>
      <p>服务态度：<strong v-if="store.storePoint">{{store.storePoint.serviceEvaluate || 0}}分</strong></p>
    </div>
  </section>
</template>

<script>
  // 获取配置
  import { API } from '../../common/config'

  // 获取当前是否是文件类型
  import { isImageFile } from '../../common/util.js'

  // 获取同步数据接口
  import { apiSendDataToRemote } from '../../common/api'

  export default {
    props: {
      store: {
        type: Object,
        default: () => { return {} }
      }
    },
    computed: {
      roleString() {
        // 当前是供应商
        if (this.store.userRole == 'BUYER') {
          return '采购商'
        }

        // 当前是采购商
        if (this.store.userRole == 'SELLER') {
          return '供应商'
        }

        // 当前是普通会员
        if (this.store.userRole == 'REGULAR') {
          return '普通会员'
        }

        return ''
      }
    },
    data() {
      return {
        url: `${API}decoration/updateStoreLogo`,
        storeLogoUrl: '',
        storeIds: ['1', '2', '3', '4', '5']
      }
    },
    methods: {
      /**
       * 更新店铺logo，上传成功后刷新页面
       *
       * @params { Object } $event 当前操作的对象
       */
      updateStoreLogo($event) {
        let $this = this

        // 判断当前是否是图片格式
        if (!isImageFile($event.target)) {
          this.$toast('请上传图片格式的文件')
          return
        }

        // 表单提交
        $('#updateStoreLogo').ajaxSubmit((data) => {
          $this.$emit('refress')
        })
      },

      /**
       * 一键将本店铺商品同步到好下单平台上
       */
      setDataToRemote() {
        // 索引
        let index = 0

        // 设置定时器
        var interval = setInterval(() => {
          apiSendDataToRemote({ searchType: 'store', storeId: this.storeIds[index] }).then((data) => {})

          // 如果是最后一个，则开始请求商品的数据
          if (index == 4) {
            // 同步商品
            apiSendDataToRemote({ searchType: 'goods' }).then((data) => {})
            clearInterval(interval)
          }

          index++
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './style.scss';

  .edit-logo {
    overflow: hidden;
    position: relative;
    margin-top: 10px;

    input[type=file] {
      opacity: 0;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 10;
    }
  }

  .main {
    margin-top: 20px;
  }
</style>